<template>
  <div class="cardMange app-container">
    <div class="cardMangeTitle">名片列表</div>
    <!-- 查询 -->
    <div>
      <el-form :model="form" label-width="100px" ref="userForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="form.userName" :maxlength="60" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="mobileNumber">
              <el-input v-model="form.mobileNumber" :maxlength="60" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" class="f-rt">
            <div>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button type="default" @click="onReset()">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 功能按钮 -->
    <div class="t-MT24">
      <el-button @click="openCreateEditDialog(1)" size="small" type="primary">新建名片</el-button>
    </div>
    <div class="t-MT24">
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <!--  "userId": "123sdf8", "numberViews": 1,"likeCount": 1, -->
        <el-table-column prop="userName" label="用户名称" min-width="90"></el-table-column>
        <el-table-column prop="mobileNumber" label="手机号" min-width="140"></el-table-column>
        <el-table-column prop="position" label="职称"></el-table-column>
        <el-table-column prop="companyName" label="所属公司"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="avatar" label="头像">
          <template slot-scope="scope">
            <img
              v-if="scope.row.avatar"
              :src="imgUrl+'/img/preview/'+scope.row.avatar"
              class="imgItem"
            />
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="qrCode" label="二维码">
          <template slot-scope="scope">
            <img
              v-if="scope.row.qrCode"
              :src="imgUrl+'/img/preview/'+scope.row.qrCode"
              class="imgItem"
            />
            <span v-else>--</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="130" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openCreateEditDialog(2,scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="t-MT30 f-rt">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="paginate.pageNum"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="paginate.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginate.total"
        ></el-pagination>
      </div>
      <CreateDialog ref="CreateDialogRef" @onSuccess="onSuccess" />
    </div>
  </div>
</template>

<script>
import { userList, deleteUser } from "@/api/common";
import CreateDialog from "./dialog/createDialog.vue";
export default {
  name: "cardMange",
  components: {
    CreateDialog
  },
  data() {
    return {
      imgUrl: `https://mini.qdkcompressor.com/adviser/sys`,
      // 表格数据
      tableData: [],
      // 分页
      paginate: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      form: {
        userName: "",
        mobileNumber: ""
      }
    };
  },
  methods: {
    /**
     * 请求列表数据
     * @param {number} pageNum - 当前页
     * @param {number} pageSize - 页数
     */
    requestList(pageNum, pageSize) {
      userList({
        ...this.form,
        pageNum,
        pageSize
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.paginate.total = res.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 刷新列表
    refreshList() {
      this.requestList(this.paginate.pageNum, this.paginate.pageSize);
    },
    // 表单搜索
    onSearch() {
      this.paginate.pageNum = 1;
      this.refreshList();
    },
    //重置
    onReset() {
      this.form = { userName: "", mobileNumber: "" };
      this.refreshList();
    },

    /**
     * 翻页
     * @param {number} pageNum - 当前页
     */
    handleCurrentChange(pageNum) {
      this.paginate.pageNum = pageNum;
      this.refreshList();
    },

    /**
     * 更改页数
     * @param {number} pageSize - 页数
     */
    handleSizeChange(pageSize) {
      this.paginate.pageNum = 1;
      this.paginate.pageSize = pageSize;
      this.refreshList();
    },
    // 打开创建编辑用户弹窗
    openCreateEditDialog(type, row = {}) {
      // type 1新建 2编辑
      this.$refs.CreateDialogRef.onpen(type, row);
    },
    // 创建编辑用户成功
    onSuccess() {
      this.refreshList();
    },
    // 删除用户
    onDelete(row) {
      const h = this.$createElement;
      this.$msgbox({
        title: "",
        message: h("p", null, [
          h("p", null, "您确定删除该用户吗？")
        ]),
        confirmButtonText: "确定",
        showCancelButton: true,
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteUser({userId:row.userId}).then(res => {
            if (res.code == 200) {
              this.$message.success('删除成功');
              this.refreshList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.refreshList();
  }
};
</script>

<style>
.cardMangeTitle {
  margin: 20px 0px;
}
.t-MT24 {
  margin-top: 24px;
}
.t-MT30 {
  margin-top: 30px;
}
.f-rt {
  display: flex;
  justify-content: flex-end;
}
.imgItem {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
</style>